<!--
 * @Date: 2023-05-22 11:11:32
 * @LastEditTime: 2023-09-12 17:35:40
 * @FilePath: /wkw/src/views/kLine/index.vue
 * 介绍:
-->
<route lang="json">
{
  "meta": {
    "title": "WKC/USDT",
    "navbar": {
      "bg": "#131622",
      "color": "var(--C-while)"
    }
  }
}
</route>
<script lang="ts" setup>
import { useCtradingViewRef } from "@@/components/common/CtradingView";
import { Datafee } from "./datafee";
import {
  apiKlineTransactionLogs,
  ApiKlineTransactionLogs,
} from "@@/api/transaction/list";
import dayjs from "dayjs";
import { fixedDecimals } from "@@/utils/tools/format";
import { CstateTagEmun } from "@@/components/common/CstateTag";

const datafeed = new Datafee();
const CtradingViewRef = useCtradingViewRef();
onMounted(() => {
  const chart = CtradingViewRef.value?.chart;
  chart?.onChartReady(() => {
    const currentChart = chart.chart();
    currentChart.onIntervalChanged().subscribe(chart, (resolution, b) => {
      console.log("onIntervalChanged");
    });
  });
});

const type = computed<CstateTagEmun>(() => [
  {
    text: "from_price_usd",
    value: "WKC",
    style: {
      color: "var(--C-fail)",
    },
  },
  {
    text: "to_price_usd",
    value: "USDT",
    style: {
      color: "var(--C-success)",
    },
  },
]);

const amount = computed<CstateTagEmun>(() => [
  {
    text: "from_amount",
    value: "WKC",
  },
  {
    text: "to_amount",
    value: "USDT",
  },
]);
const count = computed<CstateTagEmun>(() => [
  {
    text: "to_amount",
    value: "WKC",
  },
  {
    text: "from_amount",
    value: "USDT",
  },
]);
type ItemKey = keyof ApiKlineTransactionLogs.DataItem;
interface ItemSlot {
  index: number;
  item: ApiKlineTransactionLogs.DataItem;
}
</script>

<template>
  <CpageView class="kLine">
    <CtradingView
      height="50vh"
      ref="CtradingViewRef"
      interval="15"
      :datafeed="datafeed"
      :symbol="datafeed.symbol"
    >
    </CtradingView>
    <CrequestList
      is-one-page
      class="list"
      :api="apiKlineTransactionLogs"
      sticky
    >
      <template #header>
        <Cgrid class="list_item list_title T-S-sm" col="4" repeat="1fr">
          <div>{{ $t("shi-jian") }}</div>
          <div>{{ $t("cheng-jiao-jia") }}</div>
          <div>{{ $t("cheng-jiao-liang-0") }}(WKC)</div>
          <div>{{ $t("cheng-jiao-liang") }}($)</div>
        </Cgrid>
      </template>
      <template #item="{ item }">
        <Cgrid class="list_item T-S-sm" col="4" repeat="1fr">
          <div>{{ dayjs(item.time * 1000).format("HH:mm") }}</div>
          <CstateTag :enum="type" :value="item.from_symbol" mode="text">
            <template #default="{ text: k }">
              {{ fixedDecimals(item[k as ItemKey], 5) }}
            </template>
          </CstateTag>
          <CstateTag :value="item.from_symbol" :enum="amount" mode="text">
            <template #default="{ text: k }">
              {{ fixedDecimals(item[k as ItemKey], 2) }}
            </template>
          </CstateTag>
          <CstateTag :value="item.from_symbol" :enum="count" mode="text">
            <template #default="{ text: k }">
              {{ fixedDecimals(item[k as ItemKey], 2) }}
            </template>
          </CstateTag>
        </Cgrid>
      </template>
    </CrequestList>
  </CpageView>
</template>

<style lang="scss" scoped>
.kLine {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  background-color: #131622;
  .list {
    .list_title {
      padding: var(--gap-sm) 0;
    }
    .van-sticky--fixed {
      .list_title {
        background-color: var(--C-T1);
      }
    }
  }
}
</style>
